Back in the days, if you wanted to run something fancy in your browser, you needed to install a plugin. Each one of those supported only a specific technology. So, Flash plugin only supported Flash, Java plugin only supported Java and if you wanted to run .NET code, you needed Silverlight.
Eventually, with the widespread adoption of HTML5 and CSS3, along with improvements to JavaScript, it became possible to run all of the advanced graphical content directly in browsers. The need for plugins has disappeared and they were gradually phased out.
However, with the plugins becoming obsolete disappeared the ability to run compiled code in browsers. JavaScript, as powerful and feature-rich as it is, is still merely interpreted. This means that it is read by the browser statement by statement and is translated into low level machine instructions on the go. The fact that it has to be scanned and translated reduces the performance. Compiled code, on the other hand, is already shipped in form of low-level machine instructions, so no translation steps are needed.
Even though JavaScript is an interpreted language, modern CPUs are fully capable of using it to run some impressive visual effects. However, when you need to run an application with some really advanced 3D graphics or mixed reality capabilities, you will need something more. This is where WebAssembly comes into play.
What is WebAssembly
WebAssembly, or “wasm”, as it is also known, is a low-level language available directly in the browser that can serve as a compilation target for any traditional high-level compiled language, such as C, C++ and Rust. With introduction of Blazor, even .NET languages can now be compiled into WebAssembly. So, as the name suggests, the language plays a similar role to the traditional Assembly language, but it is specifically designed for the web.
Internally, WebAssembly is different from traditional Assembly and it still can’t run the apps at fully native speed due to various internal components of the browser being in the way between the executable code and the machine’s hardware. However, for all practical purposes, the speed of execution is still very close to native. It can still do many really impressive things that were absolutely impossible to achieve with JavaScript alone. Also, it is more powerful than any plugins that needed to be used to run compiled code in the browser in the past.
WebAssembly is not a proprietary technology owned by a single organisation. It is an emerging web standard that is currently being finalised. As such, it is available in any modern browser that is being actively updated. As the technology is a web standard, it is not susceptible to the same fate as Flash, Java Applets or Silverlight. WebAssembly is here to stay.
What are can WebAssembly do
WebAssembly can do everything that JavaScript can and much, much more. It can even be called from, and talk to JavaScript.
One of the areas where WebAssembly has a huge advantage over JavaScript is gaming. JavaScript, in conjunction with HTML5 and CSS3, is capable of handling some pretty impressive games. However, as it takes a long time to download large JavaScript files, load time becomes an issue with JavaScript alone.
Also, as advanced as it is, JavaScript is nowhere near capable of handling games that are played on powerful consoles. WebAssembly, on the other hand, takes care of both scenarios pretty well. It is much quicker to both load and run software. So, with WebAssembly, it is possible to play great games on absolutely any device that is powerful enough to handle them, without having to explicitly install them.
Of course, gaming is not the only area where WebAssembly beats JavaScript. It also enables the following types of applications to run in browser with low latency:
- Augmented reality
- Image recognition
- Computer-aided design
- Modelling complex systems
Another noteworthy aspect of WebAssembly is that it’s not restricted to the browser. Node.js, which can be used for building server-side software and even desktop applications, can use it too.
For the full list of wasm use cases, you can visit this page.
How WebAssembly works
In a nutshell, wasm consists of two parts: JavaScript running in your application and a set of Web APIs that allow the JavaScript to access low-level functionality, such as DOM, Web GL, Web Audio API, etc.. Both parts form one system and can talk to each other seamlessly.
The most fundamental unit of binary wasm software is module. Just like a JavaScript module defined by ES2015 standard, WebAssembly module defined import and export functions.
WebAssembly has a chunk of memory specifically allocated to it in a form of a resizeable ArrayBuffer. Anything that cannot be stored in the ArrayBuffer for portability and safety reasons is stored in specially dedicated table.
On it’s own, wasm module is stateless, but it can keep the state by working in conjunction with the dedicated chunk of memory and the table. When taken together, these components are known as “instance”.
The language itself is not dissimilar from the Assembly language used in installed applications. The language is still being finalised, but the most of it has already been sufficiently developed to build powerful software. For those who are interested how the instructions are structured, this guide will help.
Will WebAssembly kill JavaScript?
So, if WebAssembly is so powerful and can do anything that JavaScript can, would we still need JavaScript beyond making the initial calls to launch wasm in the first place? The answer is yes.
Due to an enormous ecosystem that took decades to build, JavaScript is not going anywhere. There are tons of libraries, frameworks, tools and deployed applications out in the wild specifically written in JavaScript and there is absolutely no way they will be phased out any time soon.
Despite being inferior to wasm in many aspects, there are still scenarios where JavaScript is better choice. One of the things that the language allows you to do is to test several changes in a rapid succession without having to go through a lengthy redeployment process.
Although interpreted language is inferior to a compiled language in terms of performance, a compiled language needs to be compiled to work. Therefore, while working on your application, you will have to keep recompiling your wasm module with every single change that you make, while all you have to do with JavaScript is refresh your web page.
Using wasm for anything other than high-performance apps, such as the ones outlined in the use cases above, is overkill. JavaScript is more than sufficient to implement anything you expect to see on a web page, even an amazingly looking one with loads of cool animations.
Wrapping up
So, WebAssemby brings the ability to run very advanced and resource-demanding applications directly into your browser. It can do anything JavaScript can do and also many things that JavaScript can’t. However, it is designed to compliment JavaScript rather than replace it. After all, you need JavaScript to launch a WebAssembly module in the first place. So, web developers should not despair. Your JavaScript skills will still be in demand. WebAssembly is a completely new branch that grew out of the wider web development tree. The trunk and other branches are still there to stay.
